import { domObserverService } from "@/plugins/__core__/dom-observers";
import { homeDomObserverStore } from "@/plugins/__core__/dom-observers/home/store";
import { DomSelectorsService } from "@/plugins/__core__/dom-selectors/service-init.loader";

export function observeSlogan({ observerId }: { observerId: string }) {
  return domObserverService.subscribe({
    id: observerId,
    selector: DomSelectorsService.Root.cachedSync.HOME.SLOGAN,
    onAdd: (node) => {
      const $slogan = $(node as HTMLElement);

      if (!$slogan.length) return;

      $slogan.internalComponentAttr(
        DomSelectorsService.Root.internalAttributes.HOME.SLOGAN,
      );

      homeDomObserverStore.setState({
        slogan: $slogan[0],
      });
    },
    onRemove: () => {
      homeDomObserverStore.setState({
        slogan: null,
      });
    },
    existingCheck: true,
  });
}
